<template>
    <div class='flex'>
        <aside :class='$style.category'>
            <el-card>
                <template #header>类目</template>
                <Category @delete='deleteCategory' @selected='change'></Category>
            </el-card>
        </aside>
        <section v-if='currentCategoryId > 0' :class='$style.items'>
            <el-card>
                <template #header>分类</template>
                <CategoryItem :categoryId='currentCategoryId'></CategoryItem>
            </el-card>
        </section>
    </div>
</template>

<script lang='ts' setup>
    import { ref } from 'vue'
    import Category from './Category.vue'
    import CategoryItem from './Item.vue'

    const currentCategoryId = ref(0)

    function deleteCategory(id) {
        if(currentCategoryId.value == id) {
            currentCategoryId.value = 0
        }
    }

    function change(id) {
        if(currentCategoryId.value != id) {
            currentCategoryId.value = id
        }
    }

</script>


<style scoped lang='scss' module>
    .category{
        width: 500px;
    }

    .items{
        flex: 1;
        margin-left: 30px;
    }
</style>